<template>
  <div class="box" v-if="isShow">
    <div>
      {{ message }}
    </div>
  </div>
</template>

<script>
export default {
  name: "Prompt",
  data() {
    return {
      message: "默认提示",
      isShow: false,
      time: null,
    };
  },
  methods: {
    show(message, duration = 1500) {
      if (this.time) clearTimeout(this.time);
      this.isShow = true;
      this.message = message;

      this.time = setTimeout(() => {
        this.isShow = false;
        this.message = "";
        this.time = null;
      }, duration);
    },
  },
};
</script>

<style scoped>
.box {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 9;

  height: 25px;
  line-height: 25px;

  background-color: rgb(97, 97, 97);
  color: #fff;
  border-radius: 3px;
  font-size: 16px;
  padding: 10px;
}
</style>